$che-stack-library-selecter-color = $label-info-color
$che-stack-library-selecter-bg-color = #EEE

.che-stack-library-selecter
  height 110px
  width 180px
  border-color $form-element-border-color
  background-color $background-color
  border-width 2px
  border-style solid
  che-border-radius(2px)
  -webkit-box-shadow 0 1px 1px rgba(0, 0, 0, 0.05)
  box-shadow 0 1px 1px rgba(0, 0, 0, 0.05)
  margin-left 0
  cursor pointer
  margin-right 16px
  color $che-stack-library-selecter-color

  &:hover
    background-color $che-stack-library-selecter-bg-color


.che-stack-library-selecter md-card-content
  padding 0


.che-stack-library-selecter .title
  padding-left 10px
  padding-top 4px
  padding-bottom 3px
  font-size 14px
  text-transform uppercase
  color $label-primary-color


.che-stack-library-selecter .body
  margin-top 12px
  margin-bottom 8px

.che-stack-library-selecter md-icon
  font-size 60px
  text-align center
  margin-left auto
  margin-right auto
  margin-top 16px
  margin-bottom 0
  padding 0
  height 74px
  width 74px


.che-stack-library-selecter-active
  border-color $primary-color
  color $primary-color

  &:hover
    color $primary-color
    background-color $che-stack-library-selecter-bg-color

.che-stack-library-selecter-active:hover .title
  background-color $primary-color
  color $background-color


.che-stack-library-selecter-active .body
  background-color $primary-color

.che-stack-library-selecter-active .title
  background-color $primary-color
  color $background-color

.che-stack-library-selecter-active:hover .body
  background-color $primary-color !important
  color $background-color

.che-stack-library-selecter-active:hover md-icon
  color $primary-color

.che-stack-library-selecter-active md-icon
  color $primary-color

.che-stack-library-selecter:active .body
  display block

che-stack-library-selecter md-card:focus
  outline none

che-stack-library-selecter
  outline none

.che-stack-library-selecter-extra-text
  cursor pointer
  margin-right 7px
  margin-bottom 7px
  line-height 5px

.che-stack-library-selecter-descr
  font-size 12px
  padding-left 10px
  padding-right 20px
  text-align justify
  position relative

  $line-height = 16px
  $text-height = 3 * $line-height

  overflow hidden
  height $text-height !important
  min-height $text-height !important
  max-height $text-height !important
  line-height $line-height
  box-sizing content-box

  .che-stack-library-selecter-descr-ellipsis
    position absolute
    bottom 0
    right 20px
    width 25px
    display none
    text-align right

    background-size 100% 100%
    background linear-gradient(to right, rgba(255, 255, 255, 0), $background-color 50%, $background-color)

.che-stack-library-selecter:hover .che-stack-library-selecter-descr-ellipsis
  background linear-gradient(to right, rgba(255, 255, 255, 0), $che-stack-library-selecter-bg-color 50%, $che-stack-library-selecter-bg-color)
